<template>
	<div>
		<div class="crumbs"> 
            <div class="container">
                <el-form ref="form" :model="form" label-width="130px">
					<div class="lu hnk"></div><div class="hnk jgxx">扫码LOGO</div>
					<!-- <el-col> -->
						<el-form-item label-width="0" style="margin:20px;">
							<el-upload
								class="upload-poster"                               
								action="https://jsonplaceholder.typicode.com/posts/"
								:show-file-list="false"
								:on-change="imgPreview"
								:auto-upload="false">
								<img v-if="scanImg" :src="scanImg" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
							宽高标准：750*98（像素）
							支持格式：jpg，png
						</el-form-item>
					<!-- </el-col> -->
					<div style="position: relative;">
						
						<div class="lu hnk"></div><div class="hnk jgxx">产品配置</div>
						<div style="float: right;">
							<el-form-item label="系统有效期" style="">
							<!-- <el-col :span="4" style="margin-left:-10px;"> -->
								<el-date-picker  type="date" placeholder="选择日期" value-format="yyyy/MM/dd"
					                    format="yyyy/MM/dd"  v-model="form.expiretimeStart" style="width: 170px;"></el-date-picker>至
							<!-- </el-col> -->
							 
							 <!-- <el-col :span="4"> -->
								<el-date-picker type="date" placeholder="选择日期" value-format="yyyy/MM/dd"
					                    format="yyyy/MM/dd"  v-model="form.expiretimeEnd" style="width: 170px;"></el-date-picker>
							
						</el-form-item>
						</div>
						<div style="margin-top:50px;">
							<!-- <div v-for="(item,index) in menuList" :key="index">
								<el-col :span="10">
									<el-form-item label="产品名称">
										<el-select v-model="item.customAppName1" @change="getname(item,index)"  value-key="id"  placeholder="" style="width:300px">
											<el-option v-for="item in listall" :key="item.id" :label="item.customAppName" :value="item">{{item.customAppName}}</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="版本">
										<el-select v-model="item.version1"  value-key="customAppVersionId" @change="getversion(item,index)" placeholder="" style="width:300px">
											<el-option v-for="item in versionlist" :key="item.customAppVersionId" :label="item.customAppVersionName" :value="item">{{item.customAppVersionName}}</el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</div> -->
							<el-row>
								<div v-for="(item,index) in menuList" :key="index">
									<el-form-item label="产品名称：" style="display:inline-block;">
										<el-select v-model="item.name" @change="getname(item,index)" value-key="id"  placeholder="" style="width:150px">
											<el-option v-for="item in listall" :key="item.id" :label="item.name" :value="item">{{item.name}}</el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="版本：" label-width="70px" style="display:inline-block;">
										<el-select v-model="item.version" @change="getversion(item,index)" value-key="id"  placeholder="" style="width:100px">
											<el-option v-for="item in versionlist" :key="item.id" :label="item.versionName" :value="item">{{item.versionName}}</el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="企业数量："  style="display:inline-block;">
									   <el-input v-model="item.companyNum" style="width:80px"></el-input>  个
									   <!-- <el-checkbox v-model="checked1">不限</el-checkbox> -->
									</el-form-item>
									<el-form-item label="品种数量："  style="display:inline-block;">
									   <el-input v-model="item.modelNum" style="width:80px"></el-input>  个
									   <!-- <el-checkbox v-model="checked2">不限</el-checkbox> -->
									</el-form-item>
								</div>
								<el-col>
									<el-form-item label-width="60px">
										<el-button @click="add">+添加</el-button>
									</el-form-item>
									
								</el-col>
							</el-row>
							 
						</div>
						
					</div>
					<el-form-item class="footerFixed" label-width="0px">
					    <el-button type="primary" @click="qy_save" >提交</el-button>
					    <el-button @click="backPage">返回</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	import { set_gov_setcustomapp,app_listall_customapp,app_list_customappversion,company_get_govconfig,company_get_customapp } from "@/request/api"
	import uploadImg from '../../../common/uploadImg';
	export default{
		data(){
			return{
				menuList:[{
					customAppName:'',
					customAppVersionName:'',
					customAppId:'',
					customAppVersionId:''
				}],
				scanImg:'',
				date1:'',
				date2:'',
				form:{},
				listall:[],
				name:'',
				version:'',
				versionlist:'',
				checked1:false,
				checked2:false,
				id1:"",
				id2:'',
				id3:'',
				modelNum:'',
				companyNum:'',
				companyId:'',
				asd:''
			}
		},
		mounted(){
			this.companyId = this.$route.query.id
			this.init()
		},
		methods:{
			add(){
				this.menuList.push({customAppName:'',customAppVersionName:''})
			},
			getversion(item,index){
				this.menuList[index].customAppVersionId = item.version.id
				this.menuList[index].customAppVersionName = item.version.versionName
		
			},
			getname(item,index){
				
				this.menuList[index].appId = item.name.appId
				this.menuList[index].customAppName = item.name.name
				this.menuList[index].customAppId = item.name.id
				
			
				app_list_customappversion(item.name.id).then((res)=>{
					this.versionlist = res.data
				})
			},
			init(){
				company_get_govconfig(this.companyId).then((res)=>{
					if(res.data.expiretimeEnd || res.data.expiretimeEnd == "undefined"){
						res.data.expiretimeEnd = ""
					}
					if(res.data.expiretimeStart || res.data.expiretimeStart == "undefined"){
						res.data.expiretimeStart = ""
					}
					
					if(res.data.id){
						this.form = res.data
						if(this.form.scanImg){
							this.scanImg = this.$store.state.plantImg + this.form.scanImg
						}
					}
					
					
					
					
					
				})
				company_get_customapp(this.companyId).then((res)=>{
					if(res.data[0].customAppName){
						if(this.menuList.length>0){
						this.asd =1
						this.menuList = res.data
						for(var r=0;r<this.menuList.length;r++){
							this.menuList[r].name =this.menuList[r].customAppName
							// {
							// 	appId:this.menuList[r].appId,
							// 	name :this.menuList[r].customAppName,
							// 	id :this.menuList[r].customAppId
							// }
							this.menuList[r].version =this.menuList[r].customAppVersionName
							// {
							// 	id:this.menuList[r].customAppVersionId,
							// 	versionName :this.menuList[r].customAppVersionName
								
							// }
						}
						console.log(this.menuList)
						if(this.menuList[0].expiretime){
							this.start = this.menuList[0].expiretime.substring(0,10)
						}
						if(this.menuList[0].expiretimeEnd){
							this.end = this.menuList[0].expiretimeEnd.substring(0,10)
						}
					}
					}
					
					
				})
				app_listall_customapp("").then((res)=>{
					this.listall = res.data
				})
			},
			imgPreview(file,fileList){
			    this.scanImg =  URL.createObjectURL(file.raw);
			    let fileName = file.name;
			    let regex = /(.jpg|.gif|.png|.jpeg)$/;
			    if (regex.test(fileName.toLowerCase())) {
			        this.form.files = file.raw
			        this.form.scanImg = file.name
			    } else {
			        this.$message.error('请选择图片文件');
			    }
			},
			
			qy_save(){
				let formdata = new FormData
				// var companyId = localStorage.getItem("companyId")
				var arry = []
				this.menuList.map(((item,index)=>{
					arry.push(Object.assign({},item,{expiretime:this.form.expiretimeStart,expiretimeEnd:this.form.expiretimeEnd,companyId:this.companyId}))
				}))
				// console.log(arry)
				for(var s=0;s<arry.length;s++){
					var arr= arry[s]
					for(var key in arr){
						// console.log(arr[key])
						formdata.set("companyCustomAppVersions"+ "[" +s +"]."+key,arr[key])
					}
				}
				if(this.asd == 1){
					var id = "govConfig.id"
					formdata.set(id,this.form.id)
				}
				var a = "govConfig.scanImg"
				if(this.form.scanImg){
					
					formdata.set(a,this.form.scanImg)
				}else{
					formdata.set(a,"")
				}
				var s = "govConfig.expiretimeStart"
				if(this.form.expiretimeStart){
					
					formdata.set(s,this.form.expiretimeStart)
				}else{
					formdata.set(s,"")
				}
				var d = "govConfig.expiretimeEnd"
				if(this.form.expiretimeEnd){
					
					formdata.set(d,this.form.expiretimeEnd)
				}else{
					formdata.set(d,"")
				}
				
				var f = "govConfig.companyId"
				formdata.set(f,this.companyId)
				formdata.append("files", this.form.files);
				for (var [a, b] of formdata.entries()) {
				console.log(a, b);
				}
				set_gov_setcustomapp(formdata).then((res)=>{
					this.$notify({
						title: '提示',
						message: '保存成功',
						type: 'success',
						duration: 1000
					});
					this.$router.go(-1)
				})
			},
			backPage(){
				this.$router.go(-1)
			}
		}
	}
</script>

<style scoped>
	.crumbs{
	    width:95%;
	    margin:0 auto;
	    margin-top: 30px;
	    background: #ffffff;
	}
	.container{
	    padding:10px;
	}
	.lu{
	    width: 8px;
	    height: 16px;
	    background: greenyellow;
	}
	.hnk{
	    display:inline-block;
	}
	.jgxx{
	    margin-left:10px ;
	    font-weight:600;
	    font-size: 15px;
	}
	.handle-input {
	        width: 300px;
	        display: inline-block;
	        /* margin-left: 30px; */
	    }
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    width:180px;
	    overflow: hidden;
	  }
	  
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .el-upload--text{
	      width:180px;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 178px;
	    height: 178px;
	    line-height: 178px;
	    text-align: center;
	  }
	  .avatar {
	    width: 178px;
	    height: 178px;
	    display: block;
	  }
</style>
